<template>

	<!-- <div style="height:60px;text-align: center;background-color:white;">
		<img src="../assets/logo.png" alt="" height="20px" style="position: relative;margin-top: 20px;">
		<span style="line-height: 60px;">xx后台管理系统</span>
	</div> -->
	<el-menu style="height: 100%;overflow-x: hidden;" 
	background-color="rgb(48,68,88)" text-color="#fff" 
	active-text-color="#ffd04b"
	 :collapse-transition="false" 
	 :collapse="isCollspan" router>
		<!-- 左上角logo区域 -->
		<div style="height: 60px;line-height: 60px;text-align: center;">
			<img src="../assets/logo.png" alt="" width="20px" 
			style="position: relative;top: 5px;margin-right: 5px;">
			<b style="color: white;" v-show="myTitle">三鑫后台管理系统</b>
		</div>
		<el-submenu :index="menu.id+''" v-for="(menu,index) in routes" :key="index">
			<!--跟模块-->
			<template slot="title">
				<i :class="menu.iconCls"></i>
				<span slot="title">{{menu.name}}</span>
			</template>
			<!-- 菜单选项 -->
			<el-menu-item :index="menuSon.path" 
					v-for="(menuSon,indexSon) in menu.children" 
					:key="indexSon">
				<template slot="title">
					<i :class="menuSon.iconCls"></i>{{menuSon.name}}
				</template>
			</el-menu-item>
		</el-submenu>
	</el-menu>
</template>
<script>
	export default {
		data() {
			return {
				userObj: {},
			}
		},
		props: {
			isCollspan: Boolean,
			myTitle: Boolean
		},
		mounted() {
			this.setUser()
		},
		computed: {
			routes() {
				//获取菜单的
				return this.$store.state.routes;
			}
		},
		methods:{
			setUser(){
				let userStr = sessionStorage.getItem('user')
				if(userStr && userStr !== undefined) {
					this.userObj=JSON.parse(userStr);
				}
			}
		}
	}
</script>

<style>
</style>
